<template>
  <div class="app-container">
    <div class="view-title">靓号订单</div>
    <el-table :data="tableDataBeautifulOrder" style="width: 100%">
      <el-table-column prop="id" label="id" width="80"> </el-table-column>
      <el-table-column prop="detail_order_code" label="订单号">
      </el-table-column>
      <el-table-column prop="package_name" label="套餐名称"> </el-table-column>
      <el-table-column prop="customer_name" label="收件人"> </el-table-column>
      <el-table-column prop="phone_number" label="联系电话"> </el-table-column>
      <el-table-column prop="address" label="收件地址"> </el-table-column>
      <el-table-column prop="number" label="开卡号码"> </el-table-column>
      <el-table-column prop="sold_price" label="售价"> </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status == null">待处理</el-tag>
          <el-tag type="primary" v-if="scope.row.status == 'DELIVER'"
            >已派单</el-tag
          >
          <el-tag type="success" v-else-if="scope.row.status == 'SUCCESS'"
            >订单成功</el-tag
          >
          <el-tag type="danger" v-else-if="scope.row.status == 'FAIL'"
            >订单失败</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="id_card" label="身份证号码"> </el-table-column>
      <el-table-column prop="commission_money" label="佣金"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="created_at" label="创建时间"> </el-table-column>
    </el-table>

    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getPrettyNumNotifyList } from "@/api/beautifulOrder";
export default {
  data() {
    return {
      tableDataBeautifulOrder: [],
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
    };
  },
  mounted() {
    this.getPrettyNumNotifyList();
  },
  methods: {
    // 获取靓号列表接口
    getPrettyNumNotifyList() {
      getPrettyNumNotifyList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataBeautifulOrder = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getPrettyNumNotifyList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getPrettyNumNotifyList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
